<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Client APP Demo</title>
<link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.js"></script>

</head>
<body>
	<div class="navbar navbar-default">
		<div class="container ">
			<p class="navbar-text">Client APP Demo</p>
		</div>
	</div>
	<div class="container ">
		<div class="row">
			<div class="col-md-9">
			
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">基本配置</h3>
					</div>
					<div class="panel-body">
						<div class="form-horizontal svrInfo">
							<div class="form-group">
								<label class="col-md-4 control-label" for="service_url">请求地址</label>
								<div class="col-md-4">
									<input name="service_url" type="text" placeholder=""
										class="form-control input-md" value="{{svrInfo.service_url}}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="method_name">请求方式</label>
								<div class="col-md-4">
									<input name="method_name" type="text" placeholder=""
										class="form-control input-md" value="{{svrInfo.method_name}}" />
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">请求头</h3>
					</div>
					<div class="panel-body">
						<div class="form-horizontal reqHeaders">
						{{#each reqHeaders}}
							<div class="form-group">
								<label class="col-md-4 control-label" for="{{@key}}">{{@key}}</label>
								<div class="col-md-4">
									<input name="{{@key}}" type="text" placeholder=""
										class="form-control input-md" value="{{@value}}" />
								</div>
							</div>
						{{/each}}
						</div>
					</div>
				</div>
				
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">请求参数</h3>
					</div>
					<div class="panel-body">
						<div class="form-horizontal reqParams">
						{{#each reqParams}}
							<div class="form-group">
								<label class="col-md-4 control-label" for="{{@key}}">{{@key}}</label>
								<div class="col-md-4">
									<input name="{{@key}}" type="text" placeholder=""
										class="form-control input-md" value="{{@value}}" />
								</div>
							</div>
						{{/each}}
						</div>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-body">
						<input id="request_btn" name="request_btn" type="button"
							class="btn btn-default" value="请求服务"></input>
					</div>
				</div>
				<div class="list-group"></div>
			</div>
			<div class="col-md-3"></div>
		</div>
	</div>
	<footer class="footer"></footer>
</body>
<script type="text/javascript">

	$(document).ready(function() {
		$('#request_btn').click(function(){
			var svrInfo = {};
			$('.svrInfo').find("input").each(function(){
				var ele = $(this);
				var name = ele.attr("name");
				var value = ele.val();
				svrInfo[name]=value;
			});
			
			var reqHeaders = {};
			$('.reqHeaders').find("input").each(function(){
				var ele = $(this);
				var name = ele.attr("name");
				var value = ele.val();
				reqHeaders[name]=value;
			});
			var reqParams = {};
			$('.reqParams').find("input").each(function(){
				var ele = $(this);
				var name = ele.attr("name");
				var value = ele.val();
				reqParams[name]=value;
			});
			var data = {
				"svrInfo":svrInfo,
				"reqHeaders":reqHeaders,
				"reqParams":reqParams
			};
			fetch("/req/service", {
				  method: "POST",
				  headers: {
				    "Content-Type": "application/json; text/plain;",
				    "Accept": "application/json; text/plain;"
				  },
				  body: JSON.stringify(data)
				}).then(function(res) {
				  alert("status : "+res.status);
				  return res.text();
				}, function(e) {
				  alert("error："+e);
				}).then(function(datas) {
					alert(datas);
		  		}).catch(function(e) {
		    		alert("error2："+e);
		  		});
		});
	});
</script>
</html>
